<template>
  <div class="cascader-power-tree-dom">
    <el-input class="mar-b-8 cascader-power-tree-serach" v-model="keyword" @input="searchData"></el-input>
    <div class="cascader-power-tree-box" v-show="!isSearch">
      <div class="cascader-power-tree-dom-item-box" ref="treeDataDom" v-for="(item, index) in treeData" :key="index">
        <CascaderPowerTreeDomListBox
          ref="listBoxDom"
          :dom-key="item.key"
          :dom-label="item.label"
          :path-arr="treeData"
          :dom-index="index"
          :key="index"
          @nextList="nextList"
          @chooseItem="chooseItem"
          :root-options="rootOptions"
        />
      </div>
    </div>
    <div class="cascader-power-tree-search-res-box" v-show="isSearch">
      <CascaderPowerTreeDomSearchListBox
        ref="searchListBoxDom"
        :root-options="rootOptions"
        @chooseItem="chooseItem"
      ></CascaderPowerTreeDomSearchListBox>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, nextTick, watch } from 'vue'
import { debounce } from 'lodash'

import CascaderPowerTreeDomListBox from '@src/component/compomentV2/cascaderPower/components/treeDom/components/listBox.vue'
import CascaderPowerTreeDomSearchListBox from '@src/component/compomentV2/cascaderPower/components/treeDom/components/searchListBox.vue'
export default defineComponent({
  name: 'CascaderPowerTreeDom',
  props: {
    choosedData: {
      type: Array,
      default: () => [],
    },
    rootOptions: {
      type: Object,
      default: () => ({}),
    },
  },
  components: { CascaderPowerTreeDomListBox, CascaderPowerTreeDomSearchListBox },
  setup(props, { emit }) {
    const treeData = ref([
      {
        key: null,
        label: null,
      },
    ])
    const treeDataDom = ref([])
    const listBoxDom = ref([])
    const searchListBoxDom = ref([])
    const keyword = ref('')
    const isSearch = ref(false)

    const chooseObj = ref({})
    const checkObj = ref({})
    watch(
      () => props.choosedData,
      () => {
        nextTick(() => {
          returnValueToDom()
        })
      },
      {
        immediate: true,
        deep: true,
      }
    )
    function returnValueToDom() {
      let chooseArr = props.choosedData
      for (let key in checkObj.value) {
        checkObj.value[key] = false
      }
      for (let k in chooseObj.value) {
        chooseObj.value[k] = false
      }
      chooseArr.forEach(i => {
        const { keyArr, key } = i
        keyArr.forEach(item => {
          chooseObj.value[item] = true
        })
        checkObj.value[key] = true
      })
      listBoxDom.value.forEach(item => {
        item.setcheckObj(checkObj.value)
        item.setchooseObj(chooseObj.value)
      })
      searchListBoxDom.value.setcheckObj(checkObj.value)
    }
    function nextList(data) {
      const { key, index, label, haveChild } = data
      if (index < treeData.value.length - 1) {
        if (key !== treeData.value[index + 1].key) {
          treeData.value = treeData.value.splice(0, index + 2)
        }

        treeData.value[index + 1].key = key
        treeData.value[index + 1].label = label
      } else if (index === treeData.value.length - 1) {
        treeData.value.push({
          key,
          label,
          haveChild,
        })
        nextTick(() => {
          treeDataDom.value[treeData.value.length - 1].scrollIntoView({
            behavior: 'smooth',
            block: 'start',
            inline: 'start',
          })
          listBoxDom.value.forEach(item => {
            item.setcheckObj(checkObj.value)
            item.setchooseObj(chooseObj.value)
          })
        })
      }
    }
    function chooseItem(data) {
      const { key, label, labelArr, keyArr } = data
      emit('chooseItem', {
        key,
        label,
        labelArr,
        keyArr,
      })
    }

    const searchData = debounce(function (e) {
      if (e.trim() !== '') {
        isSearch.value = true
      } else {
        return (isSearch.value = false)
      }
      nextTick(() => {
        searchListBoxDom.value.search(e)
      })
    }, 500)
    return {
      treeData,
      listBoxDom,
      nextList,
      chooseItem,
      chooseObj,
      checkObj,
      keyword,
      isSearch,
      searchListBoxDom,
      searchData,
      returnValueToDom,
      treeDataDom,
    }
  },
})
</script>
<style lang="scss" scoped>
@import './treeDom.scss';
</style>
